<template>
  <div class="pad">
    <MyHeader title="购物车" 
    backgroundColor="skyblue"
    ></MyHeader>
    <MyGoods :index="index" :goods="item" v-for="(item,index) in list" :key="item.id"></MyGoods>
    <MyFooter :list="list"></MyFooter>
  </div>
</template>

<script>
    // 需求1：自定义购物车头部 --props限制条件
      // 1.1 在MyHeader的props中定义变量接收数据-->props是一个对象,里面的变量也可以是对象(限制)
      // 1.2 在MyHeader中使用定义的变量
      // 1.3 父组件中传递数据

    // 需求2：发送请求获取数据,循环渲染组件至页面
      // 2.1 通过 yarn add axios 下载第三方包
      // 2.1 在Vue的prototype中将axios挂载为全局成员-->Vue.prototype.$axios=axios
      // 2.2 用created钩子在父组件data挂载完成后发送请求,将请求的数据存入data
      // 2.2 通过v-for循环生成组件,渲染至页面

    // 需求3：将goods.vue中的图片和复选框绑定优化用户体验-->将每个组件的复选框id和label标签的for属性设为一致(goods.id)
      // 3.1 在父组件循环创建子组件MyGoods时,将创建本组件的对象信息通过自定义属性(goods)传递给子组件
      // 3.2 将MyGoods子组件内的label标签的for属性和复选框的id设为一致

    // 需求4：数量控制功能
      // 4.1 MyCount获取来自父组件MyGoods传递的数据(goods),将初始数量渲染到input框中-->传对象而非id是避开单向数据流更新限制
      // 4.2 给增加和减少按钮绑定点击事件-->减少按钮需要做逻辑判断,用户输入的数量不能小于1
      // 4.3 input输入的值不能小于1,否则强制更新为1-->深度侦听goods的数据变化,如果小于1,则等于1

    // 需求5：全选小选功能
      // 5.1 将app.vue中的list数据传递给MyFooter,使用计算属性isAll(完整写法)双向绑定给input
      // 5.2 全选-->在isAll的set方法中,遍历list将接收的形参赋值给每一个goods_state
      // 5.3 小选-->在isAll的get方法中,遍历list将匹配所有小选框为true的结果return出去

    // 需求6：合计和结算功能-->定义计算变量遍历list,将goods_state为true的count累加即为结算;price和count的积即为合计
import MyHeader from './components/MyHeader.vue'
import MyGoods from './components/MyGoods.vue'
import MyFooter from './components/MyFooter.vue'
export default {
  data(){
    return {
      list:[]
    }
  },
  async created(){
     let res = await this.$axios.get('/api/cart')
    this.list = res.data.list
    console.log(res)
  },
 components:{
   MyHeader,
   MyGoods,
   MyFooter
 }
}
</script>

<style lang="less" scoped>
 .pad {
   padding-top: 45px;
   padding-bottom: 50px;
 }
</style>